<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 一、引入element-plus样式 -->
    <link rel="stylesheet" href="./static/element-plus/index.css" /><!-- Import style -->
    <link rel="stylesheet" href="./static/element-plus/theme-chalk/display.css" /><!-- 引入后,class="hidden-xs-only"才能执行 -->
    <script src="./static/js/vue.global.js"></script>               <!-- Import Vue 3 -->
    <script src="./static/element-plus/index.full.js"></script>     <!-- Import component library -->
    <style>
        /* 使用calc()函数 动态计算元素的最小高度。100vh 表示视口高度的 100%，也就是整个浏览器窗口的高度，减去 180 像素后得到的值作为元素的最小高度。这样可以确保应用了 .main 类的元素至少占据一定的高度 */
        .main{
            width: 1200px;
            margin: 0 auto;
            min-height: calc(100vh - 180px);                        /* '-' 的左右要有空格 */
        }
        a{text-decoration: none;}
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-row>
                    <!-- 1、:span="4" 该元素占4列(一行有24列) 2、flex-direction: row;设置子元素沿水平方向排列 3、align-items: center;定义弹性容器内子元素在交叉轴（与主轴垂直的轴）上的对齐方式。 -->
                    <el-col :span="4" :xs="12" style="display: flex;flex-direction: row;align-items: center;">
                        <img src="./static/images/logo.png" style="height:60px;padding-right: 8px;"/>
                        <h2>技术社区</h2>
                    </el-col>
                    <el-col :span="8" :xs="12">
                        <!-- 1、default-active 设置默认选中哪一项  2、:ellipsis="false" 设置菜单项在屏幕缩小时不省略显示 -->
                        <el-menu :default-active="activeIndex" mode="horizontal" :ellipsis="false" style="border-bottom: none !important;"> 
                            <el-menu-item index="1"><a href="3_index.html">首页</a></el-menu-item>
                            <el-menu-item index="2">文章</el-menu-item>
                            <el-menu-item index="3">课程</el-menu-item>
                            <el-menu-item index="4"><a href="7_mall.html">商场</a></el-menu-item>
                        </el-menu>
                    </el-col>
                    <!-- 1、:span="8" 该元素占8列  2、class="hidden-xs-only"当屏幕宽度小于768px时,隐藏该元素 -->
                    <el-col :span="8" class="hidden-xs-only" style="height: 60px;line-height: 60px;">
                        <el-input placeholder="请输入关键字"/>
                    </el-col>
                    <el-col :span="4" class="hidden-xs-only" style="height: 60px;line-height: 60px;text-align: right;">
                        <el-link type="primary" style="padding-right: 8px;"><a href="5_login.html">登录</a></el-link>
                        <el-link type="primary">注册</el-link>
                    </el-col>
                </el-row>
            </el-header>

            <el-main class="main">
                <el-form label-width="auto" style="max-width: 600px;margin: 80px auto;">
                    <el-form-item label="用户名">
                      <el-input v-model="name" @blur="validateName"/>
                    </el-form-item>
                    <el-form-item label="密码">
                      <el-input v-model="password" type="password" @blur="validatePassword"/>
                    </el-form-item>
                    <el-form-item label="确认密码">
                        <el-input v-model="confirmPassword" type="password" @blur="validateConfirmPassword"/>
                      </el-form-item>
                    <el-form-item label="年龄">
                      <el-input v-model="age" type="number" @blur="validateAge"/> 
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="gender">
                          <el-radio value="男">男</el-radio>
                          <el-radio value="女">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="兴趣爱好">
                        <el-checkbox-group v-model="hobby">
                          <el-checkbox value="阅读" name="type">阅读</el-checkbox>
                          <el-checkbox value="运动" name="type">运动</el-checkbox>
                          <el-checkbox value="旅行" name="type">旅行</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                    <el-form-item label="职业">
                      <el-select v-model="job" placeholder="please select your zone">
                          <el-option value="前端开发工程师">前端开发工程师</el-option>
                          <el-option value="后端开发工程师">后端开发工程师</el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="自我介绍">
                        <el-input v-model="info" type="textarea"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>

                </el-form>
            </el-main>
                
            <el-footer>
                <el-row>
                    <!-- :lg="8" :xs="24" 表示在大屏幕上占8格，在小屏幕(宽度<768px)上占24格" -->
                    <el-col :lg="8" :xs="24" style="display: flex;flex-direction: row;align-items: center;">
                        <div><img src="./static/images/logo.png" style="width: 100px;"/></div>
                        <div style="padding-left: 8px;">
                            <h2>技术社区</h2>
                            <p>致力于构建一个专业的IT技术交流社区</p>
                        </div>
                    </el-col>
                    <!-- 1、flex-direction: column; 设置子元素为垂直排列  2、align-items: center; 设置子元素水平居中  3、justify-content: center; 设置子元素垂直居中 -->
                    <el-col :lg="8" :xs="24" style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
                        <div  style="display: flex; justify-content: space-between; width: 65%; margin-bottom: 16px;">
                            <el-link type="primary">首页</el-link>
                            <el-link type="primary">文章</el-link>
                            <el-link type="primary">课程</el-link>
                            <el-link type="primary">商城</el-link>
                        </div>
                        <div  style="display: flex; justify-content: space-between; width: 70%;">
                            <el-link type="primary">关于我们</el-link>
                            <el-link type="primary">使用手册</el-link>
                            <el-link type="primary">隐私条款</el-link>
                            <el-link type="primary">建议反馈</el-link>
                        </div>
                    </el-col>
                    <el-col :lg="8" :xs="24">
                        <div style="float: right;">
                            <h2>联系我们</h2>
                            <p>电话：010-12345678</p>
                            <p>邮箱：12345678@qq.com</p>
                        </div>
                    </el-col>
                </el-row>
                <div  style="background-color: #a0cfff;text-align: center;height: 60px;line-height: 60px;">软件开发工作室版权所有</div>
            </el-footer>
        </el-container>

        <!-- 对话框 -->
        <el-dialog v-model="dialogVisible" title="请确认注册信息" width="500">
            <div style="display: flex;flex-direction: column;">
                <span>用户名：{{name}}</span>
                <span>年龄：{{age}}</span>
                <span>性别：{{gender}}</span>
                <span>兴趣爱好：{{hobby}}</span>
                <span>职业：{{job}}</span>
                <span>自我介绍：{{info}}</span>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>    
</body>

    <script>
        var App={
            data(){
                return{
                    activeIndex:"1",
                    name:"",
                    password:"",
                    confirmPassword:"",
                    age:0,
                    gender:"",
                    hobby:[],
                    job:"",
                    info:"",
                    dialogVisible:false,  // 用户名是否失去焦点
                    isNameFocused: false,
                    isPasswordFocused: false,
                    isConfirmPasswordFocused: false,
                    isAgeFocused: false,
                };
            },
            methods:{
                onSubmit(){
                    this.dialogVisible=true;
                },
                validateName() {
                    if (this.name.length < 4) {
                        this.$message.error('用户名长度不能少于4个字符');
                        this.name='';
                    }
                },
                validatePassword() {
                    if (this.password.length < 6) {
                        this.$message.error('密码长度不能少于6个字符');
                        this.password = '';
                    }
                },
                validateConfirmPassword() {
                    if (this.confirmPassword!== this.password) {
                        this.$message.error('两次输入的密码不一致');
                        this.confirmPassword = '';
                    }
                },
                validateAge() {
                    if(this.age<0){
                        this.$message.error("年龄不能为负数！");
                        this.age=0;
                    }
                }
            }
        };

        Vue.createApp(App).use(ElementPlus).mount("#app");

    </script>

</html>
